 <template>
    <div id="header">
        <div id="zxj-aa" class="hidden-xs-only">
            <a href=""><img src="../../assets/images/zxj1.jpg"></a>
        </div>
        <div id="zxj-ab" class="hidden-xs-only">
            <a>这个名字可以用吧</a>
        </div>
        <div id="zxj-ac" class="hidden-xs-only">
            <span>13</span><br>
            <a href="">更多&nbsp;&nbsp; ></a>
        </div>
        <div id="zxj-ac" class="hidden-xs-only">
            <span>545</span><br>
            <a href="">粉丝&nbsp;&nbsp; ></a>
        </div>
        <div id="zxj-ac" class="hidden-xs-only">
            <span>32</span><br>
            <a href="">文章 &nbsp;&nbsp;></a>
        </div>
        <div id="zxj-ac" class="hidden-xs-only">
            <span>111</span><br>
            <a href="">数字</a>
        </div>
        <div id="zxj-ac" class="hidden-xs-only">
            <span>21</span><br>
            <a href="">收藏喜欢</a>
        </div>
        <div id="zxj-ad" class="hidden-xs-only">
            <span>12</span><br>
            <a href="">简书站</a>
        </div>

<!--        移动端-->
        <div class="hidden-sm-and-up yd-header">
            <img src="../../assets/img-user-background-image-default.jpg" alt="">
        </div>
        <div class="hidden-sm-and-up yd-touxiang">
            <el-row>
                <el-col :xs="8">
                    <div>
                        <img src="../../assets/images/zxj1.jpg">
                    </div>
                </el-col>
                <el-col :xs="16">
                    <h2>这个名字可以吧</h2>
                    <p>0 关注</p><p>0 粉丝</p>
                </el-col>
                <el-col :xs="24">
                    <p>写了0个字，获得了0个喜欢</p>
                </el-col>
            </el-row>
        </div>
        <hr/>
    </div>
</template>
<style scoped>
    #header{
        width: 100%;
        height: 80px;
        margin-bottom:30px; 
    }
    #zxj-aa{
        float: left;
    }
    #zxj-aa img{
        width: 80px;
        height: 80px;
        margin-right: 18px;
        border-radius:50%; 
        display: block;
    }
    #zxj-ab{
        margin-left:100px; 
        padding-bottom:15px;
    }
    #zxj-ab a{
        
        font-size: 21px;
        font-weight: 700;
    }
    #zxj-ac{
        float: left;
        padding-left: 5px;
        padding-right: 10px;
        border-right:1px solid #f0f0f0;
    }
    #zxj-ac span{
        color: #333;
        font-size: 15px;
    }
    #zxj-ac a{
        text-decoration:none;
        color: #969696;
        font-size: 12px;
    }
    #zxj-ad{
        float: left;
        padding-left: 5px;
    }
    #zxj-ad span{
        color: #333;
        font-size: 15px;
    }
    #zxj-ad a{
        text-decoration:none;
        color: #969696;
        font-size: 12px;
    }
    @media screen and (max-width: 750px) {
        .yd-header{
            width: 100%;
        }
        .yd-header img{
            width: 100%;
            height: 144px;
        }
        .yd-touxiang{
            margin-bottom: 10px;
            padding: 0 20px 10px 20px;
        }
        .yd-touxiang .el-col-xs-8 div{
            margin-top: -30px;
            text-align: center;
            line-height: 86px;
            width: 86px;
            height: 86px;
            background-color: #fff;
            border-radius: 50%;
        }
        .yd-touxiang .el-col-xs-8 img{
            width: 80px;
            border-radius: 50%;
            height: auto;
        }
        .yd-touxiang .el-col-xs-16 p {
            width: auto;
            float: left;
            margin-top: 6px;
            margin-right: 20px;
            font-size: 13px;
            color: #969696;
        }
        .yd-touxiang .el-col-xs-24 p{
            font-size: 14px;
            color: #969696;
            margin-top: 10px;
        }
        hr{
            height: 10px;
            background-color: #eeeeee;
        }
    }


</style>